:root {
  --ui-user-primary: var(--purple500);
  --ui-user-primary--lighter: var(--purple300);
}

.ui-btn {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  transition: background 0.3s ease-out, color 0.2s ease-out;
  background-color: var(--white);
  color: var(--navy900);
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }

  &:focus {
    outline: 0;
  }

  &:not(.ui-btn--lone-icon) > svg {
    margin-left: -8px;
    margin-right: 8px;
  }

  /* Pseudo-elements reserved for loading states */
  &:before,
  &:after {
    top: 100%;
    position: absolute;
    content: '';
  }

  &:before {
    width: 100%;
    height: 100%;
    left: 0;
  }

  &:after {
    left: calc(50% + 20px);
    transition: top 400ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 20px;
    height: 20px;
  }
}

.ui-btn--lone-icon {
  justify-content: center;
}

/**
  * Sizing
  */

.ui-btn--small {
  height: 30px;
  padding: 0 15px;
  font-size: 12px;

  &.ui-btn--lone-icon {
    width: 30px;
    padding: 0;
  }
}

.ui-btn--medium {
  height: 36px;
  padding: 0 18px;
  font-size: 14px;

  &.ui-btn--lone-icon {
    width: 36px;
    padding: 0;
  }
}

.ui-btn--large {
  height: 46px;
  padding: 0 23px;
  font-size: 14px;

  &.ui-btn--lone-icon {
    width: 46px;
    padding: 0;
  }
}

.ui-btn--extra-large {
  height: 52px;
  padding: 0 26px;
  font-size: 14px;

  &.ui-btn--lone-icon {
    width: 52px;
    padding: 0;
  }
}

/**
  * Themes
  */

.ui-btn--primary {
  background-color: var(--ui-user-primary);
  color: var(--white);
  transition: filter 0.2s ease-out;

  &:hover {
    filter: brightness(110%);
  }

  &:active,
  &.ui-btn--active {
    filter: brightness(95%);
    box-shadow: none;
  }

  &:focus {
    box-shadow: 0 0 0 3px var(--ui-user-primary--lighter);
  }
}

.ui-btn--secondary {
  background-color: var(--navy900);
  color: var(--white);

  &:hover {
    background-color: var(--navy700);
  }

  &:active,
  &.ui-btn--active {
    background-color: var(--navy900);
    box-shadow: none;
  }

  &:focus {
    box-shadow: 0 0 0 3px var(--grey300);
  }
}

.ui-btn--tertiary {
  background-color: var(--white);
  border: 1px solid var(--grey200);
  color: var(--navy900);

  &:hover {
    border-color: var(--grey300);
    background-color: var(--grey000);
  }

  &:focus {
    box-shadow: 0 0 0 3px var(--grey100);
  }

  &:active,
  &.ui-btn--active {
    background-color: var(--grey100);
    box-shadow: none;
  }

  &.ui-btn--subdued {
    background-color: var(--grey100);
    border: 1px solid var(--grey200);
    color: var(--navy900);
  }
}

.ui-btn--flare {
  background: var(--gradient-pink);
  color: var(--white);
  transition: filter 0.2s ease-out;

  &:hover {
    filter: brightness(110%);
  }

  &:active {
    filter: brightness(95%);
  }

  &:focus {
    box-shadow: 0 0 0 3px var(--pink200);
  }
}

.ui-btn--delete {
  border-style: solid;
  border-width: 1px;
  border-color: var(--pink500);
  background-color: #fff;
  color: var(--pink500);

  &:hover {
    background-color: var(--pink500);
    border-color: var(--pink500);
    color: #fff;
  }

  &:focus {
    box-shadow: 0 0 0 3px var(--pink300);
  }

  &:active {
    background-color: var(--pink600);
    border-color: var(--pink600);
    color: #fff;
    box-shadow: none;
  }
}

.ui-btn--action {
  border-radius: 50%;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.13), 0 6px 6px rgba(0, 0, 0, 0);
  background-color: var(--ui-user-primary);
  color: #fff;
  transition: filter 0.2s ease-out;

  &:hover {
    filter: brightness(110%);
  }

  &:active {
    filter: brightness(95%);
  }

  &:focus {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.13), 0 6px 6px rgba(0, 0, 0, 0),
      0 0 0 3px var(--ui-user-primary--lighter);
  }
}

/** Grouping */
.ui-btn--grouped {
  border-radius: 0;
  border-right-width: 0 !important;

  &:first-of-type {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-right-width: 1px !important;
  }
}

.ui-btn--grouped-with-spacing {
  margin-left: 2.5px;
  margin-right: 2.5px;
}

/**
  * Variants
  */
.ui-btn--disabled,
.ui-btn:disabled {
  background: var(--grey100);
  color: var(--grey500);
  cursor: default;
  filter: none;
}

.ui-btn--loading {
  background-color: var(--grey100);
  color: var(--grey500);
  cursor: default;
}

.ui-btn--loading:before {
  background-color: var(--grey100);
  top: 0;
  z-index: 1;
}

.ui-btn--loading:after {
  background-image: url("data:image/svg+xml,%3Csvg width='20px' height='20px' viewBox='0 0 20 20' fill='#bdc4cb' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.33335912,2.33334154 C7.33335912,3.62501275 8.37502945,4.66668308 9.66670066,4.66668308 C10.9583719,4.66668308 12.0000422,3.62501275 12.0000422,2.33334154 C12.0000422,1.04167033 10.9583719,0 9.66670066,0 C8.37502945,0 7.33335912,1.04167033 7.33335912,2.33334154 L7.33335912,2.33334154 Z M14.8542189,6.81252396 C16.1458901,6.81252396 17.1875604,5.77085363 17.1875604,4.47918242 C17.1875604,3.18751121 16.1458901,2.14584088 14.8542189,2.14584088 C13.5625477,2.14584088 12.5208774,3.18751121 12.5208774,4.47918242 C12.5208774,5.77085363 13.5625477,6.81252396 14.8542189,6.81252396 L14.8542189,6.81252396 Z M4.47918242,6.81252396 C5.77085363,6.81252396 6.81252396,5.77085363 6.81252396,4.47918242 C6.81252396,3.18751121 5.77085363,2.14584088 4.47918242,2.14584088 C3.18751121,2.14584088 2.14584088,3.18751121 2.14584088,4.47918242 C2.14584088,5.77085363 3.18751121,6.81252396 4.47918242,6.81252396 L4.47918242,6.81252396 Z M17.0000598,12.0000422 C18.291731,12.0000422 19.3334013,10.9583719 19.3334013,9.66670066 C19.3334013,8.37502945 18.291731,7.33335912 17.0000598,7.33335912 C15.7083886,7.33335912 14.6667182,8.37502945 14.6667182,9.66670066 C14.6667182,10.9583719 15.7083886,12.0000422 17.0000598,12.0000422 L17.0000598,12.0000422 Z M2.33334154,12.0000422 C3.62501275,12.0000422 4.66668308,10.9583719 4.66668308,9.66670066 C4.66668308,8.37502945 3.62501275,7.33335912 2.33334154,7.33335912 C1.04167033,7.33335912 0,8.37502945 0,9.66670066 C0,10.9583719 1.04167033,12.0000422 2.33334154,12.0000422 L2.33334154,12.0000422 Z M4.47918242,17.1875604 C5.77085363,17.1875604 6.81252396,16.1458901 6.81252396,14.8542189 C6.81252396,13.5625477 5.77085363,12.5208774 4.47918242,12.5208774 C3.18751121,12.5208774 2.14584088,13.5625477 2.14584088,14.8542189 C2.14584088,16.1458901 3.18751121,17.1875604 4.47918242,17.1875604 L4.47918242,17.1875604 Z M14.8542189,17.1875604 C16.1458901,17.1875604 17.1875604,16.1458901 17.1875604,14.8542189 C17.1875604,13.5625477 16.1458901,12.5208774 14.8542189,12.5208774 C13.5625477,12.5208774 12.5208774,13.5625477 12.5208774,14.8542189 C12.5208774,16.1458901 13.5625477,17.1875604 14.8542189,17.1875604 L14.8542189,17.1875604 Z M9.66670066,19.3334013 C10.9583719,19.3334013 12.0000422,18.291731 12.0000422,17.0000598 C12.0000422,15.7083886 10.9583719,14.6667182 9.66670066,14.6667182 C8.37502945,14.6667182 7.33335912,15.7083886 7.33335912,17.0000598 C7.33335912,18.291731 8.37502945,19.3334013 9.66670066,19.3334013 L9.66670066,19.3334013 Z' stroke='none'%3E%3C/path%3E%3C/svg%3E");
  top: calc(50% - 10px);
  left: calc(50% - 10px);
  z-index: 2;
  animation-name: loadingSpinner;
  animation-duration: 1600ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes loadingSpinner {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
